<template>
  <div class="main">
    <nav-bar class="home-nav">
      <div class="left" slot="left" @click="goBack">
        <van-icon name="arrow-left" size="24"/>
      </div>
      <div slot="center">传感器数据</div>
    </nav-bar>

    <div class="charts">
      <!--空气温度传感器-->
      <div v-if="temp1" id="temperature" style="height: 271px;width: 100%;background: white;border-radius: 6px;">

      </div>
      <!--空气温度传感器-->
      <!--空气湿度传感器-->
      <div v-if="temp2" id="wet"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--空气湿度传感器-->
      <!--PM2.5传感器-->
      <div v-if="temp3" id="pm" style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--PM2.5传感器-->
      <!--风速传感器-->
      <div v-if="temp4" id="cloud"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--风速传感器-->

      <!--风向传感器-->
      <div v-if="temp5" id="direction"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--风向传感器-->
      <!--土壤湿度传感器-->
      <div v-if="temp6" id="soil"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--土壤湿度传感器-->
      <!--光照传感器-->
      <div v-if="temp7" id="light"
           style="height: 271px;width: 100%;background: white;border-radius: 6px;margin-top: 10px">

      </div>
      <!--光照传感器-->
      <no-data v-if="!temp1 && !temp2 && !temp3 && !temp4 && !temp5 && !temp6 && !temp7"></no-data>

    </div>
  </div>
</template>

<script>
  // 1. 导入 echarts
  import echarts from 'echarts'
  import noData from "@/components/content/nodata";
  import NavBar from "@/components/common/navbar/NavBar"

  export default {
    name: "Charts",
    data() {
      return {
        bid: '',
        sid: '',
        date: '',
        option1: {
          title: {
            text: '空气温度传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '°C',
            nameTextStyle: {
              color: "#9fa7b3",
              align: "right"
            },
            min: -10,
            max: 40,
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },

            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '空气温度传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}°C'
              },
              data: [20, 21, 30, 29, 21],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#4cdbbd",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#93e3da'
                    },
                      {
                        offset: 0.9,
                        color: '#2cc197'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts温度传感器图表配置项
        option2: {
          title: {
            text: '空气湿度传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: "#9fa7b3",
              align: "right"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },

            min: 0,
            max: 100,

            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '空气湿度传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}%'
              },
              data: [20, 60, 30, 29, 80],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#2381fd",//实心圆圈颜色
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#8db7ed'
                    },
                      {
                        offset: 0.9,
                        color: '#2381fd'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts空气湿度传感器图表配置项
        option3: {
          title: {
            text: 'PM2.5传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '',
            nameTextStyle: {
              color: "#9fa7b3",
              // align: "right"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            // min: 0,
            //max: 300,

            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: 'PM2.5传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}'
              },
              data: [200, 66, 300, 90, 21],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#fc656c",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e8b9be'
                    },
                      {
                        offset: 0.9,
                        color: '#fc656c'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echartsPM2.5传感器器图表配置项
        option4: {
          title: {
            text: '风速传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: 'km/h',
            nameTextStyle: {
              color: "#9fa7b3"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },

            // min: 0,
            //  max: 200,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '风速传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}km/h'
              },
              data: [50, 150, 120, 20, 130],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#8161e6",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#c2b7f3'
                    },
                      {
                        offset: 0.9,
                        color: '#8161e6'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts风速传感器图表配置项
        option5: {
          title: {
            text: '风向传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },

            //  min: 1,
            //  max: 8,
            axisLabel: {
              formatter: '风向{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '风向传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{b}风'
              },
              data: [
                {value: 1, name: '北'},
                {value: 6, name: '西南'},
                {value: 3, name: '东'},
                {value: 7, name: '西'},
                {value: 3, name: '东'},
              ],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#e8692f",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e6b39d'
                    },
                      {
                        offset: 0.9,
                        color: '#e8692f'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts风向传感器图表配置项
        option6: {
          title: {
            text: '土壤湿度传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: '%',
            nameTextStyle: {
              color: "#9fa7b3",
              align: "right"
            },

            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            min: 0,
            max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '土壤湿度传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}%'
              },
              data: [20, 60, 30, 29, 80],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#e4afcf",//实心圆圈颜色
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e72f8c'
                    },
                      {
                        offset: 0.9,
                        color: '#2381fd'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts土壤湿度传感器图表配置项
        option7: {
          title: {
            text: '光照传感器',
            left: "35%",
            top: "2%",
            textStyle: {
              fontSize: 16,
              color: "#353a41",
              fontFamily: "黑体",
            },
          },

          grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: {
            axisLine: {
              show: false
            },
            type: 'category',
            boundaryGap: true,
            data: ['03/01', '03/02', '03/01', '03/02', '03/01'],
            axisTick: {
              show: false
            },
            axisLabel: {
              color: '#9fa7b3',
            },

          },
          yAxis: {
            name: 'Lux',
            nameTextStyle: {
              color: "#9fa7b3"
            },
            axisLine: {
              show: false
            },
            type: 'value',
            axisTick: {
              show: false
            },
            //  min: 0,
            //   max: 100,
            axisLabel: {
              formatter: '{value}',
              color: '#9fa7b3',
            },
          },
          series: [
            {
              name: '光照传感器',
              type: 'line',
              // symbol: "diamond",
              symbolSize: 8,
              label: {
                show: true,
                color: "#9fa7b3",
                formatter: '{c}Lux'
              },
              data: [20, 59, 80, 29, 21],
              smooth: true,
              itemStyle: {
                normal: {
                  color: "#c67d54",
                  lineStyle: {
                    color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                      offset: 0,
                      color: '#e2d0c7'
                    },
                      {
                        offset: 0.9,
                        color: '#c67d54'
                      }]),
                    width: 3
                  }
                }
              },

            }

          ]
        },//echarts光照传感器图表配置项
        temp1: true,
        temp2: true,
        temp3: true,
        temp4: true,
        temp5: true,
        temp6: true,
        temp7: true,
      }
    },
    components: {
      noData,
      NavBar
    },
    created() {
      this.bid = this.$route.query.bid;
      this.sid = this.$route.query.sid;
      this.date = this.$route.query.date;
    },
    mounted() {
      this.creatTemperature();
      this.creatWet();
      this.creatPm();
      this.creatCloud();
      this.creatDirection();
      this.creatSoil();
      this.creatLight();

    },
    methods: {
      creatTemperature() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=2", null, r => {
          if (r.data.data.length == 0) {
            this.temp1 = false;
          } else {
            // this.option1.series[0].data=r.data.sources;
            // let str = "2020-09-18 14:09:19";
            // console.log("字符串截取为：",str.slice(5,10).replace("-","/"));
            // console.log("温度数据:",r.data);
            let times = [];//日期数组
            let wendus = [];//温度数组
            console.log('当天温度数据:', r);
            r.data.data.forEach(function (v, i) {
              // console.log('日期：',v.create_date);
              // console.log('资源：',v.sources);
              wendus.push(parseFloat(v.sources, 1));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            console.log('温度数据断点！');
            // console.log("times:",times);
            // console.log("wendus:",wendus);
            console.log("this.option1.xAxis.data:", this.option1.xAxis.data);
            console.log("this.option1.series[0].data", this.option1.series[0].data);
            this.option1.xAxis.data = times.splice(-5);
            this.option1.series[0].data = wendus.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('temperature'));
            myChart.setOption(this.option1);
          }

        });

      },
      creatWet() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=3", null, r => {
          if (r.data.data.length == 0) {
            this.temp2 = false;
          } else {
            console.log("空气湿度:", r);
            let times = [];//日期数组
            let shidus = [];//空气湿度数组
            r.data.data.forEach(function (v, i) {
              shidus.push(parseInt(parseInt(v.sources)));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("shidus:",shidus);
            this.option2.xAxis.data = times.splice(-5);
            this.option2.series[0].data = shidus.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('wet'))
            myChart.setOption(this.option2);
          }
        });

      },
      creatPm() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=7", null, r => {
          if (r.data.data.length == 0) {
            this.temp3 = false;
          } else {
            console.log('pm2.5:', r);
            let times = [];//日期数组
            let pms = [];//pm2.5数组
            r.data.data.forEach(function (v, i) {
              pms.push(parseInt(v.sources * 100));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("pms:",pms);
            this.option3.xAxis.data = times.splice(-5);
            this.option3.series[0].data = pms.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('pm'));
            myChart.setOption(this.option3);
          }

        });
      },
      creatCloud() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=5", null, r => {
          if (r.data.data.length == 0) {
            this.temp4 = false;
          } else {
            console.log("风速：", r);
            let times = [];//日期数组
            let fengsus = [];//风速数组
            r.data.data.forEach(function (v, i) {
              fengsus.push(parseInt(parseInt(v.sources)));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("fengsus:",fengsus);
            this.option4.xAxis.data = times.splice(-5);
            ;
            this.option4.series[0].data = fengsus.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('cloud'))
            myChart.setOption(this.option4);

          }

        });

      },
      creatDirection() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=4", null, r => {
          if (r.data.data.length == 0) {
            this.temp5 = false;
          } else {
            console.log("风向:", r);
            let times = [];//日期数组
            let fengxiangs = [];//风向数组
            r.data.data.forEach(function (v, i) {
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
              // fengxiangs.push(parseInt(parseInt(v.sources)));
              switch (v.sources) {
                case '1':
                  fengxiangs.push({value: 1, name: '北'});
                  break;
                case '2':
                  fengxiangs.push({value: 2, name: '东北'});
                  break;
                case '3':
                  fengxiangs.push({value: 3, name: '东'});
                  break;
                case '4':
                  fengxiangs.push({value: 4, name: '东南'});
                  break;
                case '5':
                  fengxiangs.push({value: 5, name: '南'});
                  break;
                case '6':
                  fengxiangs.push({value: 6, name: '西南'});
                  break;
                case '7':
                  fengxiangs.push({value: 7, name: '西'});
                  break;
                default:
                  fengxiangs.push({value: 8, name: '西北'});
              }
            });
            console.log("times:", times);
            console.log("fengxiangs :", fengxiangs);
            this.option5.xAxis.data = times.splice(-5);
            this.option5.series[0].data = fengxiangs.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('direction'))
            myChart.setOption(this.option5);
          }

        });
      },
      creatSoil() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=6", null, r => {
          if (r.data.data.length == 0) {
            this.temp6 = false;

          } else {
            console.log("土壤湿度:", r);
            let times = [];//日期数组
            let soils = [];//土壤湿度数组
            r.data.data.forEach(function (v, i) {
              soils.push(parseInt(parseFloat(v.sources) * 100));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("soils:",soils);
            this.option6.xAxis.data = times.splice(-5);
            this.option6.series[0].data = soils.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('soil'))
            myChart.setOption(this.option6);

          }

        });
      },
      creatLight() {
        this.$http.get("/api/UserCheckApi/getEquipmentLogTypeList?bid=" + this.bid + "&sid=" + this.sid + "&day=" + this.date + "&page=1&limit=5&type=8", null, r => {
          if (r.data.data.length == 0) {
            this.temp7 = false;
          } else {
            console.log("光照：", r);
            let times = [];//日期数组
            let lights = [];//光照数组
            r.data.data.forEach(function (v, i) {
              lights.push(parseInt(parseInt(v.sources)));
              times.push(v.create_date.slice(5, 10).replace("-", "/"));
            });
            // console.log("times:",times);
            // console.log("lights:",lights);
            this.option7.xAxis.data = times.splice(-5);
            this.option7.series[0].data = lights.splice(-5);
            // 3. 基于准备好的dom，初始化echarts实例
            let myChart = echarts.init(document.getElementById('light'));
            myChart.setOption(this.option7);

          }

        });

      },

      goBack() {
        this.$router.go(-1);
      },
    }
  }
</script>

<style scoped>
  .charts {
    padding: 10px;
  }

  .hidden {
    display: none;
  }


</style>
